<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Autoware WEB Controller</title>
    <link rel="shortcut icon" href="icon/autoware.ico" />
    <link rel="stylesheet" href="css/autoware_web_controller_style.css" type="text/css" />
    <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript" src="js/autoware_state.js"></script>
    <script type="text/javascript" src="js/autoware_engage.js"></script>
    <script type="text/javascript" src="js/vehicle_engage.js"></script>
    <script type="text/javascript" src="js/velocity_limit.js"></script>
    <script type="text/javascript" src="js/lane_change_approval.js"></script>
    <style>
      .ui-menu {
        min-width: 90px;
        max-width: 150px;
      }

      .ui-menu .ui-menu-item {
        margin: 0;
        padding: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <!-- menu -->
    <ul id="menu" class="menu">
      <li id="menu_autoware"><a href="#autoware">Autoware</a></li>
      <li id="menu_vehicle"><a href="#vehicle">Vehicle</a></li>
      <li><a href="https://github.com/tier4/Autoware-T4B" target="_blank">Github</a></li>
      <li><a href="https://webviz.io/app/" target="_blank">Webviz</a></li>
      <li class="ui-state-disabled"><a href="#">Amesville</a></li>
    </ul>
    <div class="contents">
      <h1>Status： <label id="state">Disconnect</label></h1>
      <div id="autoware">
        <h2>Autoware</h2>

        <h3>Autoware State : <span id="autoware_state"> - </span></h3>
        <textarea readonly id="autoware_state_msg" rows="20" , cols="200"></textarea>

        <h3>Autoware Engage :<span id="autoware_engage_info"> - </span></h3>
        <form action="javascript:AutowareEngagePublisher.send('Engage');" id="ui">
          <input type="submit" value="Engage" id="btn" /><br />
        </form>
        <form action="javascript:AutowareEngagePublisher.send('Disengage');" id="ui">
          <input type="submit" value="Disengage" id="btn" /><br />
        </form>
        <div>
          <span>Status:</span>
          <span id="autoware_engage_status"> - </span>
        </div>
        <h3>Vehicle Engage</h3>
        <form action="javascript:VehicleEngagePublisher.send('Engage');" id="ui">
          <input type="submit" value="Engage" id="btn" /><br />
        </form>
        <form action="javascript:VehicleEngagePublisher.send('Disengage');" id="ui">
          <input type="submit" value="Disengage" id="btn" /><br />
        </form>
        <div>
          <span>Status:</span>
          <span id="vehicle_engage_status"> - </span>
        </div>
        <div>
          <span>Control Mode:</span>
          <span id="vehicle_control_mode_status"> - </span>
        </div>
        <h3>Velocity Limit : <span id="velocity_limit_info"> - </span></h3>
        <form action="javascript:VelocityLimitPublisher.send();" id="ui" name="velocity_limit_form">
          <input type="text" name="velocity_limit" />
          <input type="submit" value="Send" id="btn" /><br />
        </form>
        <div>
          <span>Status:</span>
          <span id="velocity_limit_status"> - </span>
          <span>km/h</span>
        </div>
        <h3>Lane Change Approval : <span id="lane_change_approval_info"> - </span></h3>
        <form action="javascript:LaneChangeApprovalPublisher.send();" id="ui">
          <input type="submit" value="Approve" id="btn" /><br />
        </form>
        <div>
          <span>Status:</span>
          <span id="lane_change_approval_status"> - </span>
        </div>
      </div>
      <div id="vehicle">
        <h2>Vehicle</h2>
        <hr size="2" color="#333333" width="100%" />
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/menu.js"></script>
</html>
